<template>
  <div class="login">
    <div class="box">
      <h2>酒店系统管理平台</h2>
      <el-form size="small" ref="formRef" style="max-width: 600px" :model="formData" status-icon :rules="rules"
        label-width="auto">
        <el-form-item label="账号" prop="loginId">
          <el-input v-model="formData.loginId" />
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd">
          <el-input v-model="formData.loginPwd" type="password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">
            登录
          </el-button>
          <el-button @click="resetForm(formRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { $Login, $getOne } from '../api/admin'
import { ElNotification } from 'element-plus'
import {useRouter} from 'vue-router'
import useUser from '../store/user'
// 定义一个ref对象绑定表单
const formRef = ref<FormInstance>()

const router = useRouter()
const userStore = useUser()
// 表单数据
const formData = reactive({
  loginId: '',
  loginPwd: '',
})

// 验证账号
const validateLoginId = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}

// 验证密码
const validateLoginPwd = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

// 验证对象
const rules = reactive<FormRules<typeof formData>>({
  loginId: [{ validator: validateLoginId, trigger: 'blur' }],
  loginPwd: [{ validator: validateLoginPwd, trigger: 'blur' }],
})

// 提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let msgType = ''
      const { message, success, token } = await $Login(formData)
      if (success) {
        msgType = 'success'
        // 登录成功后，将token信息保存到浏览器缓存中
        sessionStorage.setItem('token', token) // 当浏览器关闭的时候清除
        // localStorage.setItem('token', token) // 会一直存在
        ElNotification({
          title: '通知',
          message,
          type: 'success',
        })
        let user = await $getOne({loginId: formData.loginId})
        userStore.setUser(user)
        sessionStorage.setItem('user', JSON.stringify(user))
        router.push('/index')
      } else {
        ElNotification({
          title: '通知',
          message,
          type: 'error',
        })
      }
    } else {
      console.log('error submit!')
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(()=> {
  if (userStore.user.loginId) {
    router.push('/index')
  }
})
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #142332, #446688);
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 400px;
    padding: 20px;
    border: 1px solid #fff;

    h2 {
      color: #fff;
      font-size: 28px;
      text-align: center;
      margin-bottom: 20px;
    }

    ::v-deep .el-form-item__label {
      color: #fff;
    }
  }
}
</style>